{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>组织结构图</li>
  </ol>
<section class="demo-section">

<div id="pageContent">













<section><header><h3>综合示例</h3></header><article><h4>从 <span class="code">data</span> 选项创建</h4><p>使用 <code>data</code> 选项来指定树结构。</p><div class="example">
  <div id="treemapExample1"><div class="treemap-nodes" unselectable="on"><div class="treemap-node treemap-node-has-child treemap-node-root" data-id="fhc9rskq8w" data-level="1"><a class="treemap-node-wrapper">蔬菜<div class="treemap-line-bottom" style="height: 15px; top: 31px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"><i class="treemap-node-fold-icon icon" style="transform: translate(-0px, 15px)"></i></div></a><div class="treemap-line" style="margin-top: 15px; left: 68px; width: 264px; border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-node-children" style="margin-top: 30px;"><div class="treemap-node treemap-node-has-child treemap-node-has-parent" data-id="fhc9rskr0p" data-level="2"><a class="treemap-node-wrapper"><i class="icon icon-heart text-danger"></i> 我的菜<div class="treemap-line-top" style="height: 15px; top: -16px; left: 39px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-line-bottom" style="height: 15px; top: 31px; left: 39px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"><i class="treemap-node-fold-icon icon" style="transform: translate(-0px, 15px)"></i></div></a><div class="treemap-line" style="margin-top: 15px; left: 34px; width: 68px; border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-node-children" style="margin-top: 30px;"><div class="treemap-node treemap-node-has-parent" data-id="fhc9rskr0q" data-level="3"><a class="treemap-node-wrapper" style="color: green;">青菜<div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rskuvn" data-level="3" style="padding-left: 20px;"><a class="treemap-node-wrapper"><span class="text-info">菠菜</span><div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div></div></div><div class="treemap-node treemap-node-has-child treemap-node-has-parent collapsed" data-id="fhc9rskx70" data-level="2" style="padding-left: 20px;"><a class="treemap-node-wrapper" data-toggle="tooltip" title="" style="border: 1px solid green;" data-original-title="点击展开或折叠">你的瓜<div class="treemap-line-top" style="height: 15px; top: -16px; left: 30px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-line-bottom" style="height: 15px; top: 31px; left: 30px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"><i class="treemap-node-fold-icon icon" style="transform: translate(-0px, 15px)"></i></div></a><div class="treemap-line" style="margin-top: 15px; left: -542px; width: 0px; border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-node-children" style="margin-top: 30px;"><div class="treemap-node treemap-node-has-parent" data-id="fhc9rskxyt" data-level="3"><a class="treemap-node-wrapper">南瓜<div class="treemap-line-top" style="height: 15px; top: -16px; left: 0px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsl0a6" data-level="3" style="padding-left: 20px;"><a class="treemap-node-wrapper">西瓜<div class="treemap-line-top" style="height: 15px; top: -16px; left: 0px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsl11z" data-level="3" style="padding-left: 20px;"><a class="treemap-node-wrapper">丝瓜<div class="treemap-line-top" style="height: 15px; top: -16px; left: 0px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsl1ts" data-level="3" style="padding-left: 20px;"><a class="treemap-node-wrapper">苦瓜<div class="treemap-line-top" style="height: 15px; top: -16px; left: 0px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div></div></div><div class="treemap-node treemap-node-has-child treemap-node-has-parent treemap-node-one-child" data-id="fhc9rsl2ll" data-level="2" style="padding-left: 20px;"><a class="treemap-node-wrapper">甘蓝<div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-line-bottom" style="height: 30px; top: 31px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"><i class="treemap-node-fold-icon icon" style="transform: translate(-0px, 15px)"></i></div></a><div class="treemap-node-children" style="margin-top: 30px;"><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsl3de" data-level="3"><a class="treemap-node-wrapper">大甘蓝</a></div></div></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsl4wz" data-level="2" style="padding-left: 20px;"><a class="treemap-node-wrapper" style="color: white; background-color: orange;">土豆<div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div></div></div></div></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html" id="code-fhc9ru87ha"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"treemapExample1"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js" id="code-fhc9ru92cf"><span class="pln">$</span><span class="pun">(</span><span class="str">'#treemapExample1'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">({</span><span class="pln">
    data</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'蔬菜'</span><span class="pun">,</span><span class="pln">
        children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
            html</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;i class="icon icon-heart text-danger"&gt;&lt;/i&gt; 我的菜'</span><span class="pun">,</span><span class="pln">
            children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
                textColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">'green'</span><span class="pun">,</span><span class="pln">
                text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'青菜'</span><span class="pln">
            </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                html</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;span class="text-info"&gt;菠菜&lt;/span&gt;'</span><span class="pln">
            </span><span class="pun">}]</span><span class="pln">
        </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'你的瓜'</span><span class="pun">,</span><span class="pln">
            style</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">border</span><span class="pun">:</span><span class="pln"> </span><span class="str">'1px solid green'</span><span class="pun">},</span><span class="pln">
            collapsed</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
            tooltip</span><span class="pun">:</span><span class="pln"> </span><span class="str">'点击展开或折叠'</span><span class="pun">,</span><span class="pln">
            children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'南瓜'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'西瓜'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'丝瓜'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'苦瓜'</span><span class="pun">]</span><span class="pln">
        </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'甘蓝'</span><span class="pun">,</span><span class="pln">
            children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'大甘蓝'</span><span class="pun">]</span><span class="pln">
        </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            color</span><span class="pun">:</span><span class="pln"> </span><span class="str">'orange'</span><span class="pun">,</span><span class="pln">
            textColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">'white'</span><span class="pun">,</span><span class="pln">
            text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'土豆'</span><span class="pln">
        </span><span class="pun">}]</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>从 <span class="code text-danger">&lt;ul class="treemap-data"&gt;</span> 元素创建</h4><p>在 <code>&lt;ul class="treemap-data"&gt;</code> 内使用 <code>&lt;li&gt;</code> 来指定节点内容，嵌套 <code>&lt;ul&gt;</code> 来表达层级结构。为 <code>&lt;li&gt;</code> 添加 <code>[data-*=]</code> 来设置节点属性，在 <code>&lt;li&gt;</code> 内使用  <code>&lt;div class="content"&gt;</code> 来设置节点的 <code>html</code> 属性（用于设置节点内容），使用 <code>&lt;div class="text"&gt;</code> 来设置节点 <code>text</code> 属性。</p><div class="example">
  <div id="treemapExample2" class="treemap">
    <ul class="treemap-data hide" style="display: none;">
      <li>
        水果
        <ul>
          <li>
            苹果
            <ul>
              <li>
                大苹果
                <ul>
                  <li><strong class="text-danger">大红苹果</strong></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            热带水果
            <ul>
              <li>香蕉</li>
              <li>芒果</li>
              <li>椰子</li>
              <li>菠萝</li>
            </ul>
          </li>
          <li>
            <div class="content">
              <strong>杏</strong>
              <div><span class="label label-danger">最爱</span></div>
            </div>
          </li>
          <li data-collapsed="true">
            桃子
            <ul>
              <li>油桃</li>
              <li>蟠桃</li>
            </ul>
          </li>
          <li>梅子</li>
        </ul>
      </li>
    </ul>
  <div class="treemap-nodes" unselectable="on"><div class="treemap-node treemap-node-has-child treemap-node-root" data-id="fhc9rsltlw" data-level="1"><a class="treemap-node-wrapper">
        水果
        
      <div class="treemap-line-bottom" style="height: 15px; top: 31px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"><i class="treemap-node-fold-icon icon" style="transform: translate(-0px, 15px)"></i></div></a><div class="treemap-line" style="margin-top: 15px; left: 47px; width: 502px; border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-node-children" style="margin-top: 30px;"><div class="treemap-node treemap-node-has-child treemap-node-has-parent treemap-node-one-child" data-id="fhc9rsludp" data-level="2"><a class="treemap-node-wrapper">
            苹果
            
          <div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-line-bottom" style="height: 30px; top: 31px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"><i class="treemap-node-fold-icon icon" style="transform: translate(-0px, 15px)"></i></div></a><div class="treemap-node-children" style="margin-top: 30px;"><div class="treemap-node treemap-node-has-child treemap-node-has-parent treemap-node-one-child" data-id="fhc9rslv5i" data-level="3"><a class="treemap-node-wrapper">
                大苹果
                
              <div class="treemap-line-bottom" style="height: 30px; top: 31px; left: 30px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"><i class="treemap-node-fold-icon icon" style="transform: translate(-0px, 15px)"></i></div></a><div class="treemap-node-children" style="margin-top: 30px;"><div class="treemap-node treemap-node-has-parent" data-id="fhc9rslvxb" data-level="4"><a class="treemap-node-wrapper"><strong class="text-danger">大红苹果</strong></a></div></div></div></div></div><div class="treemap-node treemap-node-has-child treemap-node-has-parent" data-id="fhc9rslz0g" data-level="2" style="padding-left: 20px;"><a class="treemap-node-wrapper">
            热带水果
            
          <div class="treemap-line-top" style="height: 15px; top: -16px; left: 37px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-line-bottom" style="height: 15px; top: 31px; left: 37px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"><i class="treemap-node-fold-icon icon" style="transform: translate(-0px, 15px)"></i></div></a><div class="treemap-line" style="margin-top: 15px; left: 128px; width: 204px; border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-node-children" style="margin-top: 30px;"><div class="treemap-node treemap-node-has-parent" data-id="fhc9rslz0h" data-level="3"><a class="treemap-node-wrapper">香蕉<div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsm1bu" data-level="3" style="padding-left: 20px;"><a class="treemap-node-wrapper">芒果<div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsm2vf" data-level="3" style="padding-left: 20px;"><a class="treemap-node-wrapper">椰子<div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsm4f0" data-level="3" style="padding-left: 20px;"><a class="treemap-node-wrapper">菠萝<div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div></div></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsm5yl" data-level="2" style="padding-left: 20px;"><a class="treemap-node-wrapper">
              <strong>杏</strong>
              <div><span class="label label-danger">最爱</span></div>
            <div class="treemap-line-top" style="height: 15px; top: -16px; left: 30px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-child treemap-node-has-parent collapsed" data-id="fhc9rsm89y" data-level="2" style="padding-left: 20px;"><a class="treemap-node-wrapper">
            桃子
            
          <div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-line-bottom" style="height: 15px; top: 31px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"><i class="treemap-node-fold-icon icon" style="transform: translate(-0px, 15px)"></i></div></a><div class="treemap-line" style="margin-top: 15px; left: -433px; width: 0px; border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-node-children" style="margin-top: 30px;"><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsm91r" data-level="3"><a class="treemap-node-wrapper">油桃<div class="treemap-line-top" style="height: 15px; top: -16px; left: 0px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsm9tk" data-level="3" style="padding-left: 20px;"><a class="treemap-node-wrapper">蟠桃<div class="treemap-line-top" style="height: 15px; top: -16px; left: 0px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div></div></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsmald" data-level="2" style="padding-left: 20px;"><a class="treemap-node-wrapper">梅子<div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div></div></div></div></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"treemapExample2"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"treemap"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="com">&lt;!-- 嵌套 ul 元素来表达树状结构 --&gt;</span><span class="pln">
  </span><span class="tag">&lt;ul</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"treemap-data hide"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;li&gt;</span><span class="pln">
      水果
      </span><span class="tag">&lt;ul&gt;</span><span class="pln">
        </span><span class="tag">&lt;li&gt;</span><span class="pln">
          苹果
          </span><span class="tag">&lt;ul&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;</span><span class="pln">
              大苹果
              </span><span class="tag">&lt;ul&gt;</span><span class="pln">
                </span><span class="tag">&lt;li&gt;&lt;strong</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"text-danger"</span><span class="tag">&gt;</span><span class="pln">大红苹果</span><span class="tag">&lt;/strong&gt;&lt;/li&gt;</span><span class="pln">
              </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
            </span><span class="tag">&lt;/li&gt;</span><span class="pln">
          </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
        </span><span class="tag">&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;li&gt;</span><span class="pln">
          热带水果
          </span><span class="tag">&lt;ul&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;</span><span class="pln">香蕉</span><span class="tag">&lt;/li&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;</span><span class="pln">芒果</span><span class="tag">&lt;/li&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;</span><span class="pln">椰子</span><span class="tag">&lt;/li&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;</span><span class="pln">菠萝</span><span class="tag">&lt;/li&gt;</span><span class="pln">
          </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
        </span><span class="tag">&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;li&gt;</span><span class="pln">
          </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"content"</span><span class="tag">&gt;</span><span class="pln">
            </span><span class="tag">&lt;strong&gt;</span><span class="pln">杏</span><span class="tag">&lt;/strong&gt;</span><span class="pln">
            </span><span class="tag">&lt;div&gt;&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-danger"</span><span class="tag">&gt;</span><span class="pln">最爱</span><span class="tag">&lt;/span&gt;&lt;/div&gt;</span><span class="pln">
          </span><span class="tag">&lt;/div&gt;</span><span class="pln">
        </span><span class="tag">&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;li</span><span class="pln"> </span><span class="atn">data-collapsed</span><span class="pun">=</span><span class="atv">"true"</span><span class="tag">&gt;</span><span class="pln">
          桃子
          </span><span class="tag">&lt;ul&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;</span><span class="pln">油桃</span><span class="tag">&lt;/li&gt;</span><span class="pln">
            </span><span class="tag">&lt;li&gt;</span><span class="pln">蟠桃</span><span class="tag">&lt;/li&gt;</span><span class="pln">
          </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
        </span><span class="tag">&lt;/li&gt;</span><span class="pln">
        </span><span class="tag">&lt;li&gt;</span><span class="pln">梅子</span><span class="tag">&lt;/li&gt;</span><span class="pln">
      </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
    </span><span class="tag">&lt;/li&gt;</span><span class="pln">
  </span><span class="tag">&lt;/ul&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#treemapExample2'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">();</span></code></pre></article></section>







<section><header><h3>使用</h3></header><article><h4>引入资源</h4><p>组织结构图为独立组件，你需要从本地或 CDN 单独引入 lib 目录下的资源：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"lib/treemap/zui.treemap.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"lib/treemap/zui.treemap.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span></code></pre><h4>初始化</h4><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"treemap"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 从 data 选项创建</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">({</span><span class="pln">
    data</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[节点数据],</span><span class="pln">
    </span><span class="com">// 其他初始化选项</span><span class="pln">
</span><span class="pun">});</span><span class="pln">

</span><span class="com">// 如果没有其他选项，可以直接将节点数据数组作为方法参数</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">([节点数据]);</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 从 &lt;ul class="treemap-data"&gt; 元素创建</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">();</span></code></pre></article></section>





<section><header><h3>节点对象</h3></header><article><p>组织结构图中的每一个节点使用一个 JS 对象来存储，在组织结构图插件中使用到的属性有：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>属性</th>
      <th style="width: 80px">名称</th>
      <th style="width: 300px">可选值</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>id</code></td>
      <td>节点的 ID</td>
      <td>字符串或数字</td>
      <td>所有节点必须有一个图内唯一值的ID，如果不指定，会使用  <code>$.zui.uuid()</code> 生成一个。</td>
    </tr>
    <tr>
      <td><code>text</code></td>
      <td>节点上显示的文本</td>
      <td>字符串, 默认 <code>''</code></td>
      <td>如果 <code>text</code> 属性和 <code>html</code> 属性都没有指定，则节点元素上不回显示内容。</td>
    </tr>
    <tr>
      <td><code>html</code></td>
      <td>节点上显示的HTML格式文本</td>
      <td>字符串, 默认 <code>''</code></td>
      <td>如果 <code>text</code> 属性和 <code>html</code> 属性都没有指定，则节点元素上不回显示内容。</td>
    </tr>
    <tr>
      <td><code>children</code></td>
      <td>子节点</td>
      <td>对象数组，默认 <code>[]</code></td>
      <td>如果没有子节点，可以忽略此属性</td>
    </tr>
    <tr>
      <td><code>order</code></td>
      <td>节点显示顺序</td>
      <td>默认 <code>''</code></td>
      <td>如果指定此值则按此属性来比较同一层级的节点并重新排序，否则安装数组中设置的顺序显示。</td>
    </tr>
    <tr>
      <td><code>style</code></td>
      <td>节点外观样式</td>
      <td>对象，默认 <code>{}</code></td>
      <td>可以使用 jQuery 的 css 方法参数对象。</td>
    </tr>
    <tr>
      <td><code>textColor</code></td>
      <td>文本颜色</td>
      <td>表示颜色的字符串，例如 <code>'#f00'</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>color</code></td>
      <td>背景颜色</td>
      <td>表示颜色的字符串，例如 <code>'#f00'</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>border</code></td>
      <td>边框样式</td>
      <td>定义边框样式的字符串，使用 CSS 格式，例如 <code>'1px solid #f00'</code></td>
      <td>也可以单独指定一项，例如 <code>'#f00'</code></td>
    </tr>
    <tr>
      <td><code>title</code></td>
      <td>备注信息</td>
      <td>字符串，默认 <code>''</code></td>
      <td>会作为节点元素的 <code>title</code> 属性的值</td>
    </tr>
    <tr>
      <td><code>tooltip</code></td>
      <td>工具提示</td>
      <td>字符串，默认 <code>''</code></td>
      <td>当鼠标悬浮在节点上时显示的工具提示内容</td>
    </tr>
    <tr>
      <td><code>className</code></td>
      <td>节点元素的 CLASS 属性</td>
      <td>对象，默认 <code>`&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;</code>attrs<code>&lt;/td&gt;
      &lt;td&gt;节点元素属性&lt;/td&gt;
      &lt;td&gt;对象，默认</code>{}<code>&lt;/td&gt;
      &lt;td&gt;会作为</code>$().attr(attrs)<code>的参数使用&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;</code>foldable<code>&lt;/td&gt;
      &lt;td&gt;是否可以折叠子节点&lt;/td&gt;
      &lt;td&gt;默认</code>true<code>&lt;/td&gt;
      &lt;td&gt;如果设置为</code>false<code>，则不会在节点下方显示折叠和展开的图标，</code>clickNodeToFold` 选项也不会生效</td>
    </tr>
  </tbody>
</table></div><p>节点对象数组用于存放一组相同层级的节点，下面为存储根节点数据对象示例：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pun">{</span><span class="pln">
        text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'蔬菜'</span><span class="pun">,</span><span class="pln">
        children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
            html</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;i class="icon icon-heart text-danger"&gt;&lt;/i&gt; 我的菜'</span><span class="pun">,</span><span class="pln">
            children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[{</span><span class="pln">
                textColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">'green'</span><span class="pun">,</span><span class="pln">
                text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'青菜'</span><span class="pln">
            </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
                html</span><span class="pun">:</span><span class="pln"> </span><span class="str">'&lt;span class="text-info"&gt;菠菜&lt;/span&gt;'</span><span class="pln">
            </span><span class="pun">}]</span><span class="pln">
        </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'你的瓜'</span><span class="pun">,</span><span class="pln">
            style</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">border</span><span class="pun">:</span><span class="pln"> </span><span class="str">'1px solid green'</span><span class="pun">},</span><span class="pln">
            collapsed</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">,</span><span class="pln">
            tooltip</span><span class="pun">:</span><span class="pln"> </span><span class="str">'点击展开或折叠'</span><span class="pun">,</span><span class="pln">
            children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'南瓜'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'西瓜'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'丝瓜'</span><span class="pun">,</span><span class="pln"> </span><span class="str">'苦瓜'</span><span class="pun">]</span><span class="pln">
        </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'甘蓝'</span><span class="pun">,</span><span class="pln">
            children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'大甘蓝'</span><span class="pun">]</span><span class="pln">
        </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            color</span><span class="pun">:</span><span class="pln"> </span><span class="str">'orange'</span><span class="pun">,</span><span class="pln">
            textColor</span><span class="pun">:</span><span class="pln"> </span><span class="str">'white'</span><span class="pun">,</span><span class="pln">
            text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'土豆'</span><span class="pln">
        </span><span class="pun">}]</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code></pre></article></section>



<section><header><h3>选项</h3></header><article><p>在初始化时可用传入一个对象来设定选项，或者为 <code>.treemap</code> 添加 <code>[data-*=]</code> 属性来指定选项， 可用选项如下：</p><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>选项</th>
      <th style="width: 80px">名称</th>
      <th style="width: 300px">可选值</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>data</code></td>
      <td>树形结构数据</td>
      <td>对象或数组，默认 <code>null</code></td>
      <td>决定图中显示哪些节点，及节点的层次结构</td>
    </tr>
    <tr>
      <td><code>rowSpace</code></td>
      <td>节点层级之间的间距</td>
      <td>数字，默认 <code>30</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>nodeSpace</code></td>
      <td>同一层级相邻节点间的间距</td>
      <td>数字，默认 <code>20</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>foldable</code></td>
      <td>是否可以折叠子节点</td>
      <td>默认 <code>true</code></td>
      <td>如果设置为 <code>false</code>，则不会在节点下方显示折叠和展开的图标，<code>clickNodeToFold</code> 选项也不会生效</td>
    </tr>
    <tr>
      <td><code>clickNodeToFold</code></td>
      <td>是否允许直接点击节点折叠子节点</td>
      <td>默认 <code>true</code></td>
      <td>如果关闭此选项，则无法直接点击节点来折叠和展开子节点，但仍然可以通过点击节点下方的折叠图标实现。</td>
    </tr>
    <tr>
      <td><code>sort</code></td>
      <td>是否启用排序</td>
      <td>布尔值或函数，默认 <code>false</code></td>
      <td>如果设置为一个函数，则使用此函数来比较节点，如果设置为 <code>true</code>，则使用节点的 <code>order</code> 属性来比较。</td>
    </tr>
    <tr>
      <td><code>cableWdth</code></td>
      <td>连接线宽度</td>
      <td>数字，默认 <code>1</code></td>
      <td>如果为 <code>0</code>，则不会显示连接线</td>
    </tr>
    <tr>
      <td><code>cableColor</code></td>
      <td>连接线颜色</td>
      <td>表示颜色的字符串，默认 <code>#808080</code></td>
      <td>如果为 <code>0</code>，则不会显示连接线</td>
    </tr>
    <tr>
      <td><code>cableStyle</code></td>
      <td>连接线样式</td>
      <td>定义线条样式的字符串，默认 <code>solid</code></td>
      <td>你可以使用 CSS <code>border-style</code> 属性的所有值</td>
    </tr>
    <tr>
      <td><code>listenNodeResize</code></td>
      <td>监听节点尺寸变化</td>
      <td>默认 <code>true</code></td> 
      <td>如果为 <code>true</code> 则当任何一个节点尺寸发生变化时重新绘制连接线，如果确认节点尺寸不会在组织结构图绘制完成后发生变化，则可以设置为 <code>false</code> 关闭此选项来避免额外的程序执行。</td>
    </tr>
    <tr>
      <td><code>tooltip</code></td>
      <td>工具提示选项</td>
      <td>对象，默认 <code>{}</code></td>
      <td>可以使用工具提示插件的选项来设置如何显示节点上的工具提示</td>
    </tr>
    <tr>
      <td><code>nodeStyle</code></td>
      <td>定义节点的默认样式</td>
      <td>对象，默认 <code>{}</code></td>
      <td>可以使用 jQuery 的 css 方法参数对象</td>
    </tr>
    <tr>
      <td><code>nodeTemplate</code></td>
      <td>节点元素模板</td>
      <td>字符串或函数</td>
      <td>默认值为 <code>&lt;div class="treemap-node"&gt;&lt;a class="treemap-node-wrapper"&gt;&lt;/a&gt;&lt;/div&gt;</code>；如果设置为函数，则通过函数返回创建的节点元素（jQuery 对象），该函数的第一个参数为节点对象。</td>
    </tr>
  </tbody>
</table></div></article></section>




















<section><header><h3>方法</h3></header><article><h4><span class="code text-danger">$().treemap('render')</span></h4><p>重新渲染组织图，通常情况下，你无需手动调用此方法，在初始化之后会自动进行一次渲染，如果发现图渲染不正确，或者发生错位，则可以调用此方法来修正实际效果。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 简单调用</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">(</span><span class="str">'render'</span><span class="pun">);</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 你还可以这样调用</span><span class="pln">
</span><span class="com">// 获取组织图实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTreemap </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.treemap'</span><span class="pun">);</span><span class="pln">
</span><span class="com">// 调用实例方法</span><span class="pln">
myTreemap</span><span class="pun">.</span><span class="pln">render</span><span class="pun">();</span></code></pre><h4><span class="code text-danger">$().treemap('render', data)</span></h4><p>使用新的数据渲染组织图。调用此方法可以立即更新组织图。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 简单调用</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTreemapData </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[...];</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">(</span><span class="str">'render'</span><span class="pun">,</span><span class="pln"> myTreemapData</span><span class="pun">);</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 你还可以这样调用</span><span class="pln">
</span><span class="com">// 获取组织图实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTreemap </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.treemap'</span><span class="pun">);</span><span class="pln">
</span><span class="com">// 调用实例方法</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTreemapData </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[...];</span><span class="pln">
myTreemap</span><span class="pun">.</span><span class="pln">render</span><span class="pun">(</span><span class="pln">myTreemapData</span><span class="pun">);</span></code></pre><h4><span class="code text-danger">$().treemap('drawLines')</span></h4><p>重新计算并绘制连接线，通常无序手动调用此方法。当发现组织图节点连接性发生错位时，调用此方法可以立即重新计算并重新绘制。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 简单调用</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">(</span><span class="str">'drawLines'</span><span class="pun">);</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 你还可以这样调用</span><span class="pln">
</span><span class="com">// 获取组织图实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTreemap </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.treemap'</span><span class="pun">);</span><span class="pln">
</span><span class="com">// 调用实例方法</span><span class="pln">
myTreemap</span><span class="pun">.</span><span class="pln">drawLines</span><span class="pun">();</span></code></pre><h4><span class="code text-danger">$().treemap('toggle', $node, toggle)</span></h4><p>折叠或展开指定的节点。此方法还有如下形式。</p><ul>
<li><code>toggle()</code>：折叠或展开第一个根节点；</li>
<li><code>toggle($node)</code>：折叠或展开指定的节点，<code>$node</code> 参数为指定的节点元素 <code>.treemap-node</code>；</li>
<li><code>toggle(toggle)</code>：折叠或展开第一个根节点，<code>toggle</code> 如果为 <code>true</code>，则为展开节点，<code>false</code> 为折叠节点；</li>
<li><code>toggle($node, toggle)</code>：折叠或展开指定的节点，<code>$node</code> 参数为指定的节点元素 <code>.treemap-node</code>，<code>toggle</code> 如果为 <code>true</code>，则为展开节点，<code>false</code> 为折叠节点；</li>
</ul><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 切换折叠或展开根节点</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">(</span><span class="str">'toggle'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 切换折叠或展开指定的节点</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> $node </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'.treemap-node[data="1497683935614002"]'</span><span class="pun">);</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">(</span><span class="str">'toggle'</span><span class="pun">,</span><span class="pln"> $node</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 切换展开根节点</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">(</span><span class="str">'toggle'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 切换折叠指定的节点</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> $node </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'.treemap-node[data="1497683935614002"]'</span><span class="pun">);</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">(</span><span class="str">'toggle'</span><span class="pun">,</span><span class="pln"> $node</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">);</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 你还可以这样调用</span><span class="pln">

</span><span class="com">// 获取组织图实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTreemap </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.treemap'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 调用实例方法</span><span class="pln">

</span><span class="com">// 切换折叠或展开根节点</span><span class="pln">
myTreemap</span><span class="pun">.</span><span class="pln">toggle</span><span class="pun">();</span><span class="pln">

</span><span class="com">// 切换折叠或展开指定的节点</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> $node </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'.treemap-node[data="1497683935614002"]'</span><span class="pun">);</span><span class="pln">
myTreemap</span><span class="pun">.</span><span class="pln">toggle</span><span class="pun">(</span><span class="pln">$node</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 切换展开根节点</span><span class="pln">
myTreemap</span><span class="pun">.</span><span class="pln">toggle</span><span class="pun">(</span><span class="kwd">true</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 切换折叠指定的节点</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> $node </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'.treemap-node[data="1497683935614002"]'</span><span class="pun">);</span><span class="pln">
myTreemap</span><span class="pun">.</span><span class="pln">toggle</span><span class="pun">(</span><span class="pln">$node</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">);</span></code></pre><h4><span class="code text-danger">showLevel(level)</span></h4><p>按层级展开节点，<code>level</code> 参数为需要展开的节点层级，<code>0</code> 为根节点。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取组织图实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTreemap </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.treemap'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 调用实例方法</span><span class="pln">

</span><span class="com">// 展开所有二级节点</span><span class="pln">
myTreemap</span><span class="pun">.</span><span class="pln">showLevel</span><span class="pun">(</span><span class="lit">2</span><span class="pun">);</span></code></pre></article></section>









<section><header><h3>事件</h3></header><article><h4>事件 <span class="code text-danger">afterRender</span></h4><p>该事件在渲染完毕时触发。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 jQuery.on() 方法绑定事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'afterRender'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'组织结构图渲染完毕。'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span></code></pre><pre class="prettyprint prettyprinted" style=""><code><span class="com">// 在初始化时通过选项监听事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">({</span><span class="pln">
    </span><span class="com">// ...</span><span class="pln">
    </span><span class="str">'afterRender'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'组织结构图渲染完毕。'</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>事件 <span class="code text-danger">afterDrawLines</span></h4><p>该事件在重新绘制连接性后触发。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 jQuery.on() 方法绑定事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'afterDrawLines'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'已重新绘制连接线。'</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span></code></pre><pre class="prettyprint prettyprinted" style=""><code><span class="com">// 在初始化时通过选项监听事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">({</span><span class="pln">
    </span><span class="com">// ...</span><span class="pln">
    </span><span class="str">'afterDrawLines'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'已重新绘制连接线。'</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>事件 <span class="code text-danger">onNodeClick</span></h4><p>该事件在用户点击节点元素时触发。该事件回调函数包含一个参数为被点击的节点对象。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用 jQuery.on() 方法绑定事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">on</span><span class="pun">(</span><span class="str">'onNodeClick'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">node</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'被点击的节点为'</span><span class="pun">,</span><span class="pln"> node</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span></code></pre><pre class="prettyprint prettyprinted" style=""><code><span class="com">// 在初始化时通过选项监听事件</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">({</span><span class="pln">
    </span><span class="com">// ...</span><span class="pln">
    </span><span class="str">'onNodeClick'</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">node</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'被点击的节点为'</span><span class="pun">,</span><span class="pln"> node</span><span class="pun">);</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>

















<script src="__ZUI__/lib/treemap/zui.treemap.js"></script>


<script>
$(function(){
	afterPageLoad();
})
function afterPageLoad() {
    setTimeout(function() {
      $('#treemapExample1').treemap({
          data: {
              text: '蔬菜',
              children: [{
                  html: '<i class="icon icon-heart text-danger"></i> 我的菜',
                  children: [{
                      textColor: 'green',
                      text: '青菜'
                  }, {
                      html: '<span class="text-info">菠菜</span>'
                  }]
              }, {
                  text: '你的瓜',
                  style: {border: '1px solid green'},
                  collapsed: true,
                  tooltip: '点击展开或折叠',
                  children: ['南瓜', '西瓜', '丝瓜', '苦瓜']
              }, {
                  text: '甘蓝',
                  children: ['大甘蓝']
              }, {
                  color: 'orange',
                  textColor: 'white',
                  text: '土豆'
              }]
          }
      });
      $('#treemapExample2').treemap();
      $('#treemapExample3').treemap({
          data: {
              text: '星星',
              icon: 'star',
              children: [
                  {text: '心', icon: 'heart'},
                  {text: '眼睛', icon: 'eye-open'},
                  {text: '礼物', icon: 'gift'}
              ]
          },
          nodeTemplate: function(node, tree) {
              var $node = $('<div class="treemap-node"></div>');
              $node.append('<a class="treemap-node-wrapper">' + node.text + '</a>');
              $node.find('.treemap-node-wrapper').prepend('<i class="icon icon-' + node.icon + '"></i> ');
              return $node;
          }
      });
      $('#treemapExample4').treemap({
          data: [
              {
                  text: '图一',
                  children: [
                      {text: '心'},
                      {text: '眼睛'},
                      {text: '礼物'}
                  ]
              }, {
                  text: '图二',
                  children: [
                      {text: '太阳'},
                      {text: '月亮'},
                      {text: '地球'}
                  ]
              }
          ]
      });
    }, 1000);
}
</script><section><header><h3>其他问题</h3></header><article><h4>重新绘制图</h4><p>如果你主动更改了节点元素的内容，此时节点元素尺寸发生了变化，导致连接线错位，此时你可以调用 <code>drawLines</code> 方法来重新绘制连接线。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 简单调用</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">(</span><span class="str">'drawLines'</span><span class="pun">);</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 你还可以这样调用</span><span class="pln">
</span><span class="com">// 获取组织图实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myTreemap </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#myTreemap'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.treemap'</span><span class="pun">);</span><span class="pln">
</span><span class="com">// 调用实例方法</span><span class="pln">
myTreemap</span><span class="pun">.</span><span class="pln">drawLines</span><span class="pun">();</span></code></pre><h4>自定义节点模板</h4><p>通常节点元素会自动根据节点对象生成，但也可以通过选项 <code>nodeTemplate</code> 来指定一个回调函数来创建节点元素。</p><p>下面的例子为每个节点元素根据节点对象中的 <code>icon</code> 属性在名称前添加一个图标：</p><div class="example">
  <div id="treemapExample3" class="treemap"><div class="treemap-nodes" unselectable="on"><div class="treemap-node treemap-node-has-child treemap-node-root" data-id="fhc9rsmtvu" data-level="1"><a class="treemap-node-wrapper"><i class="icon icon-star"></i> 星星<div class="treemap-line-bottom" style="height: 15px; top: 31px; left: 32px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"><i class="treemap-node-fold-icon icon" style="transform: translate(-0px, 15px)"></i></div></a><div class="treemap-line" style="margin-top: 15px; left: 37px; width: 165.188px; border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-node-children" style="margin-top: 30px;"><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsmunn" data-level="2"><a class="treemap-node-wrapper"><i class="icon icon-heart"></i> 心<div class="treemap-line-top" style="height: 15px; top: -16px; left: 26px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsmwz0" data-level="2" style="padding-left: 20px;"><a class="treemap-node-wrapper"><i class="icon icon-eye-open"></i> 眼睛<div class="treemap-line-top" style="height: 15px; top: -16px; left: 33px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsn025" data-level="2" style="padding-left: 20px;"><a class="treemap-node-wrapper"><i class="icon icon-gift"></i> 礼物<div class="treemap-line-top" style="height: 15px; top: -16px; left: 33px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div></div></div></div></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"treemapExample3"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"treemap"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#treemapExample3'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">({</span><span class="pln">
    data</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'星星'</span><span class="pun">,</span><span class="pln">
        icon</span><span class="pun">:</span><span class="pln"> </span><span class="str">'star'</span><span class="pun">,</span><span class="pln">
        children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'心'</span><span class="pun">,</span><span class="pln"> icon</span><span class="pun">:</span><span class="pln"> </span><span class="str">'heart'</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'眼睛'</span><span class="pun">,</span><span class="pln"> icon</span><span class="pun">:</span><span class="pln"> </span><span class="str">'eye-open'</span><span class="pun">},</span><span class="pln">
            </span><span class="pun">{</span><span class="pln">text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'礼物'</span><span class="pun">,</span><span class="pln"> icon</span><span class="pun">:</span><span class="pln"> </span><span class="str">'gift'</span><span class="pun">}</span><span class="pln">
        </span><span class="pun">]</span><span class="pln">
    </span><span class="pun">},</span><span class="pln">
    nodeTemplate</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">node</span><span class="pun">,</span><span class="pln"> tree</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        </span><span class="kwd">var</span><span class="pln"> $node </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'&lt;div class="treemap-node"&gt;&lt;/div&gt;'</span><span class="pun">);</span><span class="pln">
        $node</span><span class="pun">.</span><span class="pln">append</span><span class="pun">(</span><span class="str">'&lt;a class="treemap-node-wrapper"&gt;'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> node</span><span class="pun">.</span><span class="pln">text </span><span class="pun">+</span><span class="pln"> </span><span class="str">'&lt;/a&gt;'</span><span class="pun">);</span><span class="pln">
        $node</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="str">'.treemap-node-wrapper'</span><span class="pun">).</span><span class="pln">prepend</span><span class="pun">(</span><span class="str">'&lt;i class="icon icon-'</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> node</span><span class="pun">.</span><span class="pln">icon </span><span class="pun">+</span><span class="pln"> </span><span class="str">'"&gt;&lt;/i&gt; '</span><span class="pun">);</span><span class="pln">
        </span><span class="kwd">return</span><span class="pln"> $node</span><span class="pun">;</span><span class="pln">
    </span><span class="pun">}</span><span class="pln">
</span><span class="pun">});</span></code></pre><h4>多个根节点</h4><p>在同一个组织结构图内可以存在多个根节点，这样可以一次性绘制多个组织结构图。只需要在初始化时使用数组传入多个根节点数据即可。</p><div class="example">
  <div id="treemapExample4" class="treemap"><div class="treemap-nodes" unselectable="on"><div class="treemap-node treemap-node-has-child treemap-node-root" data-id="fhc9rsna3a" data-level="1"><a class="treemap-node-wrapper">图一<div class="treemap-line-bottom" style="height: 15px; top: 31px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"><i class="treemap-node-fold-icon icon" style="transform: translate(-0px, 15px)"></i></div></a><div class="treemap-line" style="margin-top: 15px; left: 28px; width: 129px; border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-node-children" style="margin-top: 30px;"><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsna3b" data-level="2"><a class="treemap-node-wrapper">心<div class="treemap-line-top" style="height: 15px; top: -16px; left: 17px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsnbmw" data-level="2" style="padding-left: 20px;"><a class="treemap-node-wrapper">眼睛<div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsncep" data-level="2" style="padding-left: 20px;"><a class="treemap-node-wrapper">礼物<div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div></div></div><div class="treemap-node treemap-node-has-child treemap-node-root" data-id="fhc9rsndya" data-level="1" style="padding-left: 20px;"><a class="treemap-node-wrapper">图二<div class="treemap-line-bottom" style="height: 15px; top: 31px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"><i class="treemap-node-fold-icon icon" style="transform: translate(-0px, 15px)"></i></div></a><div class="treemap-line" style="margin-top: 15px; left: 225px; width: 136px; border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div><div class="treemap-node-children" style="margin-top: 30px;"><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsndyb" data-level="2"><a class="treemap-node-wrapper">太阳<div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsng9o" data-level="2" style="padding-left: 20px;"><a class="treemap-node-wrapper">月亮<div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div><div class="treemap-node treemap-node-has-parent" data-id="fhc9rsnht9" data-level="2" style="padding-left: 20px;"><a class="treemap-node-wrapper">地球<div class="treemap-line-top" style="height: 15px; top: -16px; left: 24px; color: rgb(128, 128, 128); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128);"></div></a></div></div></div></div></div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"treemapExample4"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"treemap"</span><span class="tag">&gt;&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="pln">$</span><span class="pun">(</span><span class="str">'#treemapExample4'</span><span class="pun">).</span><span class="pln">treemap</span><span class="pun">({</span><span class="pln">
    data</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
        </span><span class="pun">{</span><span class="pln">
            text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'图一'</span><span class="pun">,</span><span class="pln">
            children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
                </span><span class="pun">{</span><span class="pln">text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'心'</span><span class="pun">},</span><span class="pln">
                </span><span class="pun">{</span><span class="pln">text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'眼睛'</span><span class="pun">},</span><span class="pln">
                </span><span class="pun">{</span><span class="pln">text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'礼物'</span><span class="pun">}</span><span class="pln">
            </span><span class="pun">]</span><span class="pln">
        </span><span class="pun">},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
            text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'图二'</span><span class="pun">,</span><span class="pln">
            children</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
                </span><span class="pun">{</span><span class="pln">text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'太阳'</span><span class="pun">},</span><span class="pln">
                </span><span class="pun">{</span><span class="pln">text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'月亮'</span><span class="pun">},</span><span class="pln">
                </span><span class="pun">{</span><span class="pln">text</span><span class="pun">:</span><span class="pln"> </span><span class="str">'地球'</span><span class="pun">}</span><span class="pln">
            </span><span class="pun">]</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
    </span><span class="pun">]</span><span class="pln">
</span><span class="pun">});</span></code></pre><link href="__ZUI__/lib/treemap/zui.treemap.css" rel="stylesheet"></article></section></div>

</section>
{/block}